<template>
<div class="bar"  >
    <div class="header">
     <div class="header_left">    
     <i class="iconfont icon-other" @click="isshow = !isshow"></i>	        
     </div>   
     <div class="header_center">
     <span @click="isshow = !isshow">卖座电影</span>
     </div>
     <div class="header_right">        
      <span class="sz">深圳</span>
      <i class="iconfont icon-unfold"></i>	
      <i class="iconfont icon-icon-test" @click=""></i>
      </div>
    </div>
      
      <transition enter-active-class="animated fadeIn" leave-active-class="animated fadeOut">
       <div class="left-side1" v-show="isshow" @click="isshow = ! isshow"></div>
       </transition>
    <transition enter-active-class="animated fadeInLeft" leave-active-class="animated fadeOutLeft">
		   <nav class="left-side" v-show="isshow" @click="change" >         
      		<li><a href="./">首页</a><i class="iconfont icon-enter"></i></li>
      		<li><a href="#">影片</a><i class="iconfont icon-enter"></i></li>
      		<li><a href="#">影院</a><i class="iconfont icon-enter"></i></li>
      		<li><a href="#">商城</a><i class="iconfont icon-enter"></i></li>
      		<li><a href="#">演出</a><i class="iconfont icon-enter"></i></li>
      		<li><a href="#">我的</a><i class="iconfont icon-enter"></i></li>
      		<li><a href="#">卖座卡</a><i class="iconfont icon-enter"></i></li> 
	      </nav>
      </transition>

   </div>
</template>
<script>
export default {
  data(){
    return{
      isshow:false
    }
  },
  methods:{
  		change:function(){
  			console.log("点击跳转")
  		}
  	
  }
}
</script>
<style>
*{
  margin: 0;
  padding: 0;
}

.header{
  width: 100%;
  height:50px;
  background: #282828;
  position: fixed;
  top:0;
  left: 0;
  display: flex;
  z-index: 10;
  color: #9A9A9A;
  display: -webkit-flex;
 }
.header .header_left{
	height: 100%;
	padding-left: 10px;
	line-height: 50px;	
	flex: 1;
}
.header .header_left .icon-other{
	font-size: 25px;
	height: 100%;
	line-height: 50px;
}
.header .header_center{	
	height: 100%;
	line-height: 50px;
	flex: 3;
	color: #FFFFFF;
}
.header .header_right{	
	height: 100%;
	line-height: 50px;
	flex: 2;
	text-align: right;
	padding-right: 20px;
}
.header .header_right span{
	font-size: 14px;
}


 .left-side{
   color: #fff;
   list-style: none;
   background: #282828;
   position: fixed;
   top:50px;
   left:0;
   right: 100px;
   bottom: 0;
   box-shadow: 0 1px 1px #363636 inset;
   z-index: 10;
    
 }
 .left-side1{
  background: rgba(0,0,0,0.5);
   position: fixed;
   top:50px;
   left:0;
   right: 0;
   bottom: 0;
   z-index: 9;
 }
 .left-side li{
  	height: 51px;
	padding: 0 16px;
	line-height: 51px;
	border-bottom: 1px solid #404040;
	position: relative;
 }
  .left-side li a{
  	text-decoration: none;
    color: #fff;
    display: block;
    width: 100%;
    padding:0 16px;
    border-bottom:1px dotted #333;
    box-sizing: border-box;
  }
 .left-side li a span{
      float: right;
      margin-right: 10px;
      width: 50px;
      text-align: center;
     line-height: 50px;

 }
 .icon-enter{
	color: #CCCCCC;
	position: absolute; left: 85%; top: 0;
}
</style>